
<template>
  <div>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%">

      <el-table-column
          label="订单id"
          prop="id"
          width="70">
      </el-table-column>

      <el-table-column
          label="订单编号"
          prop="number"
          width="150">
      </el-table-column>

      <el-table-column
          label="商品名称"
          prop="productid"
          width="200">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="productname in productnames" v-show="productname.id == scope.row.productid">
            {{productname.productname}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="订购数量"
          prop="num"
          width="100">
      </el-table-column>

      <el-table-column
          label="交付日期"
          prop="deliverydate"
          width="100">
      </el-table-column>

      <el-table-column
          label="投标截止日期"
          prop="tenderdate"
          width="120">
      </el-table-column>

      <el-table-column
          label="收货人"
          prop="recevierid"
          width="150">
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.name}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="收货联系方式"
          prop="recevierid"
          width="120">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.connection}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="收货人地址"
          prop="recevierid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.address}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="tages"
          align="center"
          filter-placement="bottom-end"
          label="订单状态"
          prop="statusid"
          width="150">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <el-tag
              disable-transitions>
          <span v-for="status in statuses" v-show="status.id == scope.row.statusid">
            {{status.status}}
          </span>
            <span v-for="factorytender in factorytenders" v-if="factorytender.orderid == scope.row.id">
              （已投标）
            </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          v-if="this.$store.state.factorystatusid==1"
          :filter-method="filterTag"
          :filters="buttons"
          filter-placement="bottom-end"
          label="操作" width="200">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <el-button
              v-for="but in buttons"
              v-if="but.value == scope.row.statusid "
              :type="getButtonTypes(scope.row.statusid)"
              size="mini" @click="handleEdit(scope.$index, scope.row)">
            {{but.text}}
          </el-button>
          <el-button
              v-for="factorytender in factorytenders"
              v-if="factorytender.orderid == scope.row.id && factorytender.statusid==2 && (scope.row.statusid==4||scope.row.statusid==5)"
              :type="getButtonTypes(scope.row.statusid)"
              size="mini" @click="scheduling(scope.$index, scope.row)">
            排产
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="租用设备" width="200">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="出价" required style="width: auto">
          <el-col :span="11">
            <el-form-item prop="quote">
              <el-input v-model="form.quote" placeholder="出价"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="
        dialogVisible = false;
        this.$message({
          message: '修改取消!',
          type: 'warning'
      })"
        >取消</el-button>
        <el-button type="primary" @click="submitForm('form')">确定</el-button>
      </span>
    </el-dialog>

    <el-pagination
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible:false,
      factorytenders:null,
      pageSize: 14,
      total: null,
      statuses:null,
      tableData: null,
      receviers:null,
      productnames:null,
      tages:[],
      currentPage:1,
      buttons:[{text:"投标",value:2},{text:"投标",value:3},{text:"发货",value:5}],
      form:{
        orderid: null,
        factoryid:this.$store.state.factoryid,
        quote:null,
        statusid:1,
      },
      rules:{
        num: [
          { required: true, message: '出价不能为空', trigger: 'blur' }
        ]
      },
    }
  },created(){
    this.getTableData();
    axios.get('http://localhost:8081/orderstatus/findAll').then(
        (response) => {
          this.statuses = response.data;

          for (const sta of this.statuses) {
            const tage = {text: sta.status, value: sta.id};
            this.tages.push(tage);
          }
        }
    );
    axios.get('http://localhost:8081/order/getProductname').then(
        (response) => {
          this.productnames = response.data;
        }
    );
    axios.get('http://localhost:8081/order/getReceviers').then(
        (response) => {
          this.receviers = response.data;
        }
    );
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.statusid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page(currentPage) {
      this.currentPage=currentPage;
      this.getTableData();
    },
    getButtonTypes(statusid){
      let type="";
      switch (statusid){
        case 2:
          type='primary';
          break;
        case 3:
          type='info';
          break;
        case 4:
          type='success';
          break;
        case 5:
          type='warning';
          break;
      }
      return type;
    },
    handleEdit(index, row) {
      switch (row.statusid){
        case 2:
        case 3:
          this.form.orderid = row.id;
          for (const tender of this.factorytenders) {
            if(tender.orderid == row.id){
              this.form.quote = tender.quote;
              break;
            }
          }
          this.dialogVisible=true;
          break;
        case 5:
          axios.get('http://localhost:8081/order/managechangestatus/' + row.id + '/' + row.statusid).then(
              (response) => {
                if(response.data == "success"){
                  this.getTableData();
                  this.$message({
                    type: 'success',
                    message: '发货成功!'
                  });
                }else {
                  this.getTableData();
                  this.$message({
                    type: 'error',
                    message: '发货失败,有设备仍在排产中!'
                  });
                }
              }
          );
          break;
      }
    },
    scheduling(index, row){
      this.$router.push({
        path:'/scheduling',
        query:{
          orderid:row.id,
        }
      })
    },
    getTableData() {
      if (this.currentPage != 1) {
        axios.get('http://localhost:8081/order/manageriorderlist/' + this.currentPage + '/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
              axios.get('http://localhost:8081/tender/factorytender/'+this.$store.state.factoryid).then(
                  (response) => {
                    this.factorytenders = response.data;
                  }
              );
            }
        );
      } else {
        axios.get('http://localhost:8081/order/manageriorderlist/1/'+this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
              axios.get('http://localhost:8081/tender/factorytender/'+this.$store.state.factoryid).then(
                  (response) => {
                    this.factorytenders = response.data;
                  }
              );
            }
        );
      }

  },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/tender/save',this.form).then((response)=>{
            if(response.data == "success"){
              this.dialogVisible = false;
              this.$message({
                message: '投标成功!',
                type: 'success'
              });
              this.getTableData();
            }else{
              this.$message.error('投标失败!');
              this.dialogVisible = false;
              this.getTableData();
            }
          });
        } else {
          this.$message.error('投标失败，出价不能为空!');
          this.dialogVisible = false;
          return false;
        }
      });
    },
  }
}
</script>